<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <p>父传子的校验：子组件作为公用的组件，会被经常调用，穿件来的数据可能有误，导致代码报错。</p>
        <com
            :info1="msg1"
            :info2="msg2"
            :info3="msg3"
            :info4="msg4"
            :info5="msg5"
            :info6="msg6"
        ></com>
    </div>
    <script src="../0511/js/vue.js"></script>
    <script>
        let vm = new Vue({
            el: '#app',
            data: { 
                msg1: '666',
                msg2: 10086,
                msg3: {name: 'Tom'},
                msg4: 777,
                msg5: 'nv',
                msg6: [5,1],
            },
            components: {
                'com': {
                    template: 
                    `
                        <div>
                            <p>第1条数据：{{info1}}</p>
                            <p>第2条数据：{{info2}}</p>
                            <p>第3条数据：{{info3.name}}</p>
                            <p>第4条数据：{{info4}}</p>
                            <p>第5条数据：{{info5}}</p>
                            <p>第6条数据：{{info6}}</p>
                        </div>
                    `,
                    // props通过属性名传值
                    props: {
                        info1: String,
                        info2: [String, Number],
                        info3: {
                            type: Object
                        },
                        // 以上都是规定数据类型
                        // 必填
                        info4: {
                            required: true
                        },
                        // 设置默认值
                        info5: {
                            default: 'nan'
                        },
                        info6: {
                            // 自定义校验函数，这个函数会自动执行，名字固定：validator
                            validator: val => {
                                // return 后面是校验规则
                                return val[0] === 5
                            }
                        }
                    }
                }
            }
        })
    </script>
</body>
</html>